<script>
	    var init = function(){
	    	var projectsStore = new dojo.data.ItemFileWriteStore( { url : "/FinalProject/app/projectManagement?projectOp=project_get_project_list", clearOnClose: true, jsId:"projectsStore"});
			var grid = new dojox.grid.DataGrid({
			                    query: { projectName: '*' },
			                    store: projectsStore,
			                    structure: Layouts.projectLayout
			                 }, 'projectsGrid');
			var personalGrid = new dojox.grid.DataGrid({
				query 		: { userLogin : "*"},
				structure	: Layouts.usersLayout
			}, "personalGrid");
			var ordersLayout = [
			        				{ field : "orderId", 	name: "Id", 				width : "auto"},
			        				{ field : "userId",		name: "User id", 		width : "auto"},
			        				{ field : "date", 		name: "Order date", 		width : "auto"},
			        				{ field : "itemType", 	name: "Instrument type", 	width : "auto"},
			        				{ field : "itemDescription", name: "Description", 	width : "auto"},
			        				{ field : "timeUnit", 	name : "Time slot length", 	width : "auto"},
			        				{ field : "usagePrice", name : "Price per slot", 	width : "auto"},
			        				{ field : "startSlot", 	name : "Start slot", 		width : "auto"},
			        				{ field : "slotsCount",	name : "Slots count", 		width : "auto"},
			        				{ field : "total", 		name : "Total price", 		width : "auto"}
			        			];
			var ordersGrid = new dojox.grid.DataGrid( {
				query : { orderId : "*"},
				structure : ordersLayout
			}, "projectOrdersGrid");
			ordersGrid.startup( );
			personalGrid.startup( );				
			//grid.onRowDblClick = userUpdateHandler(grid, projectsStore);
			grid.onSelected = function( ) {
				// Use closure to create memorization/state of whenever control buttons were inserted already
				var wasClickedOnce = false;
				return function( event) {
					var item = this.selection.getSelected( )[0];
					var personalStore = new dojo.data.ItemFileWriteStore({ 	
								url : "/FinalProject/app/projectManagement?projectOp=project_get_personal_list&projectName=" + item.projectName,
						 		clearOnClose: true, jsId:"personalStore"
					});
					personalGrid.setStore( personalStore);
					var ordersStore = new dojo.data.ItemFileWriteStore( {
						url : "/FinalProject/app/ordersManagement?ordersOp=order_project_orders_list&projectId=" + this.selection.getSelected( )[0].projectId[0], 
						clearOnClose: true, 
						jsId:"ordersStore"});
					ordersGrid.setStore( ordersStore); 
					// First time button clicked, hence need to intiate control buttons
					if ( wasClickedOnce == false) {
						wasClickedOnce = true;
						var addToProject = new dijit.form.Button( {
							label 	: "Add User to Project",
							onClick : function( event) {
								var addPersonalDialog = new dijit.Dialog( {
									id 		: "addPersonalDialog",
									title	: "Select personal to add",
									href	: "/FinalProject/templates/projects/addPersonal.jsp"
								});
								addPersonalDialog.onCancel = function ( event) {
									this.destroyRecursive( );
								};
								addPersonalDialog.show( );
							}
						}, "addButtonCntr");
						var deleteFromProject = new dijit.form.Button( {
							label	: "Delete from Project",
							onClick	: function( event) {
								if ( dijit.byId( "personalGrid").selection.getSelected( ).length == 0) {
									dijit.byId('toaster').setContent('Select row from the grid before delete.', 'fatal');
								    dijit.byId('toaster').show();							
									return;
								}
								var userItem = dijit.byId( "personalGrid").selection.getSelected( )[0];
								var projectItem = dijit.byId( "projectsGrid").selection.getSelected( )[0];
								if ( !userItem || !projectItem)
									return;
								dojo.xhrPost( {
									url 		: "/FinalProject/app/projectManagement",
									content		: { 
										projectOp		: "project_delete_personal",
										userLogin		: userItem.userLogin[0],
										projectName		: projectItem.projectName[0]},
									load 		: function( data, ioArgs) {
										if ( data == "ERROR") {
											dijit.byId('toaster').setContent('Backend error. Could not delete personal from project.', 'fatal');
										    dijit.byId('toaster').show();							
											return;
										}
										dijit.byId( "personalGrid").removeSelectedRows( );
								        dijit.byId('toaster').setContent('Personal removed successefuly.', 'fatal');
								        dijit.byId('toaster').show();																		
									},
									error		: function( ioArgs) {
										if ( data == "ERROR") {
									        dijit.byId('toaster').setContent('Backend error. Could not delete personal from project.', 'fatal');
									        dijit.byId('toaster').show();							
											return;
										}
									} 
								});
							}
						}, "deleteButtonCntr");
					}
				};
			}( );
			grid.startup( );
			projectGridState.currentGrid=grid;
	    };
   		dojo.addOnLoad(init);	

</script>

<div class="gridContainer" style="width: 100%; height: 800px;">
	<h2>
		Projects list:
	</h2>
	<div id='projectsGrid' style="width: 100%; height: 250px;">
	</div>
	<table>
		<tr>
			<td id="addButtonCntr">
			</td>
			<td id="deleteButtonCntr">
			</td>
		</tr>
	</table>
	<h2>
		Project personal list:
	</h2>
	<div id="personalGrid" style="width: 100%; height: 200px;">
	</div>
	<h2>
		Projects orders list:
	</h2>
	<div id="projectOrdersGrid" style="width: 100%; height: 250px;">
	</div>
	
</div>
<hr />